<script lang="ts" setup name="RoleFront">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { User } from '~/src/api/interface/user'
import { getRoleFrontAPI } from '~/src/api/user'
import RoleFrontDialog, { RoleFrontDialogExpose } from '../components/RoleFrontDialog'
import { roleFrontColumn } from './info/columns'
const onDelete = () => {}
const roleFrontRef = ref<RoleFrontDialogExpose>()
const openDialog = (title: string, row?: User.RoleFront) => {
  if (row) {
    roleFrontRef.value?.setParams({ data: row, title })
  } else {
    roleFrontRef.value?.setParams({
      data: {
        name: '',
        maxDiscount: '',
        maxReduceAmount: '',
        roleMenuIds: [],
        remark: '',
      },
      title,
    })
  }
}

const proTableRef = ref<ProTableInstance>()
</script>

<template>
  <div class="auto-height-container">
    <pro-table
      ref="proTableRef"
      :columns="roleFrontColumn"
      highlight-current-row
      :indent="20"
      :isCard="false"
      :pagination="true"
      :request-api="getRoleFrontAPI"
      row-key="id"
      title="盘点单列表"
    >
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openDialog('新增')">新增角色</el-button>
        <el-button v-auth="'delete'" :icon="Delete" @click="onDelete">删除</el-button>
      </template>
      <template #name="{ row }">
        <el-button v-auth="'edit'" :edit="EditPen" link type="primary" @click.stop="openDialog('编辑', row)">{{ row.name }}</el-button>
      </template>
    </pro-table>
    <role-front-dialog ref="roleFrontRef" @on-ok="() => proTableRef?.getTableList()" />
  </div>
</template>

<style lang="scss" scoped></style>
